﻿@{
    Layout = null;
}
@model Project.MODEL.Employee

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        .headimg {
            height: 60px;
            border-radius: 50%;
            display:flex;
        }
        .headimg img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .over-avatar {
            position: absolute;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 12px;
            color: rgba(0,0,0,0);
            text-align: center;
            border-radius: 50%;
            background: rgba(0,0,0,0);
            cursor: pointer;
            z-index: 10;
        }
        .over-avatar:hover {
            color: #FFF;
            background: rgba(0,0,0,0.5);
        }
    </style>
    
</head>
<body>
    <div class="layui-container">
        <form class="layui-form">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>账户信息</legend>
            </fieldset>
            <!--文本框-->
            <div class="layui-form-item">
                <label class="layui-form-label">账户</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input layui-disabled" disabled value="@Model.loginID" />
                </div>
            </div>
            <!--密码框-->
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" class="layui-input layui-disabled" disabled value="*********" />
                </div>
                <input id="btn_modifypwd" type="button" class="layui-btn layui-btn-primary" lay-submit value="修改密码" />
            </div>
            <!--文本框-->
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input layui-disabled" disabled value="@Model.phone" />
                </div>
            </div>
            <!--开关-->
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" class="layui-disabled" name="hopy" value="1" disabled checked lay-skin="switch" lay-text="正常|冻结" />
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>基础信息</legend>
            </fieldset>
            <!--文本框-->
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input layui-disabled" disabled value="@Model.emName" />
                </div>
            </div>
            <!--文本框-->
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline">
                    <div class="headimg">
                        <img id="file_headimg"  src="@Model.headImg" />
                        <div class="over-avatar" id="avatar-settings">更换头像</div>
                    </div>

                </div>
            </div>
            <!--文本框-->
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input layui-disabled" disabled value="@Model.emSex" />
                </div>
            </div>
            <!--文本框-->
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input layui-disabled" disabled value="@Model.Roles.Department.deptName" />
                </div>
            </div>
            <!--文本框-->
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input layui-disabled" disabled value="@Model.Roles.roleName" />
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        layui.use(['element', 'form', 'upload'], function () {
            var element = layui.element;
            var form = layui.form;

            $("#btn_modifypwd").on("click", function () {
                //所有弹层方法 前加上 parent  让弹窗在父窗口
                var index = parent.layer.open({
                    type: 1,
                    title: false,
                    area: ["440px"],
                    scrollbar: false,
                    content: $("#formpwd").html(),
                    success: function (layero, index) {
                        parent.form.render(); //
                        parent.form.on("submit(myformpwd)", function () {
                            var data = parent.form.val("myformpwd");
                            $.post("/System/User/ChangePassword", data, function (data) {
                                var d = JSON.parse(data);
                                if (d.code > 0) {
                                    parent.layer.close(index);
                                    parent.layer.msg(d.msg, { icon: 6, time: 2000 }, function () {
                                        top.SignOut();
                                    });

                                } else {
                                    parent.layer.msg(d.msg, { icon: 5 });
                                }
                            });
                            return false;
                        })
                    }
                });
            });

            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#avatar-settings' //绑定元素
                , url: '/Files/Upload/' //上传接口
                , accept: "file"
                //, acceptMime: 'image/*'
                , done: function (res) {
                    console.log(res);
                    //上传完毕回调
                    if (res.code > 0) {
                        $.post("/System/User/ChangeHeadImg", { imgpath: res.filepath }, function (data) {
                            var d = JSON.parse(data);
                            if (d.code > 0) {
                                $("#file_headimg").attr("src", res.filepath);
                                $(top.document).find("#headimg").attr("src", res.filepath);
                                top.layer.msg(d.msg);
                            } else {
                                top.layer.msg(d.msg);
                            }
                        });

                    } else {
                        top.layer.msg(res.msg);
                    }   
                }
                , error: function () {
                    //请求异常回调
                }
            });
        })

        $(function () {
            $(".headimg").on("mouseenter", function () {
                $(this).nextAll(".over-avatar").show();
            })
            $(".headimg").on("mouseleave", function () {
                $(this).nextAll(".over-avatar").hide();
            })
        });
    </script>
</body>
</html>
<script type="text/template" id="formpwd">
    <form class="layui-form layui-form-pane" lay-filter="myformpwd" style="width:400px; margin:20px;">
        <!--密码框-->
        <div class="layui-form-item">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-block">
                <input name="pwd" type="password" class="layui-input" required lay-verify="required" placeholder="请输入原密码" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input name="newpwd" type="password" class="layui-input" required lay-verify="required|contrastPass" placeholder="请输入新密码" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input name="confirmpwd" type="password" class="layui-input" required lay-verify="required|confirmPass" placeholder="确认密码与新密码保持一致" />
            </div>
        </div>
        <!--按钮-->
        <div class="layui-btn-container">
            <input type="submit" class="layui-btn layui-btn-fluid" lay-submit value="立即提交" />
        </div>
    </form>
</script>
